/**
 * Created by Administrator on 2016/9/17.
 */
window.onload = function (){
    var oSearch = $("search");

    window.onscroll=function(){
        var scroll=document.body.scrollTop||document.documentElement.scrollTop;
        if(scroll>=42){
            console.log(122);
            oSearch.style.position = "fixed";
            oSearch.style.top = 0;
        }else{
            oSearch.style.top = "42px";
        }
    };

    function $(id){
        return document.getElementById(id);
    }

    jQuery.noConflict;
    (function($){
        var
            oCar = $("#car"),
            oCarInfo = $("#car-info"),
            oMore =$("#more"),
            oMoreIfo = $("#more-info"),
            oEvt1 = $("#evt1"),
            oEvent1 = $("#event1"),
            oEvt2 = $("#evt2"),
            oEvent2 = $("#event2"),
            oEvt3 = $("#evt3"),
            oEvent3 = $("#event3"),
            oBox1ImgList = $("#img-list"),
            oBanner = $("#banner"),
            oBox2 = $("#box2"),
            oBox2A = $("#box2 a"),
            oLeftIfo = $("#left-info"),
            oLeftIfoLi = $("#left-info li"),
            oContent = $("#content"),
            oContentDiv = $("#content div"),
            oDirectionBtn = $("#direction-btn"),
            oLeftBtn = $("#left-btn"),
            oRightBtn = $("#right-btn");
        var
            oContMore1Div = $("#cont-more1 div"),
            oContMore1Img = $("#cont-more1 img"),
            oBotA = $("#bota"),
            oL1 = $("#l1"),
            oDetail = $("#detail");

        var
            iTimer = null,
            mIndex = 1,
            flag = true;

        oCar.mouseenter(function(){
            oCarInfo.stop(true).slideToggle(200,"linear");
        });
        oCar.mouseleave(function(){
            oCarInfo.stop(true).slideToggle(200,"linear");
        });
        oMore.mouseenter(function(){
            oMoreIfo.stop(true).css({display:"block"}).animate({height:258,opacity:1},300);
        });
        oMore.mouseleave(function(){
            oMoreIfo.stop(true).animate({height:0,opacity:0},300,function(){
                oMoreIfo.css({display:"none"});
            })
        });
        oEvt1.mouseenter(function(){
            oEvent1.stop(true).css({display:"block"}).animate({height:230,opacity:1},300);
        });
        oEvt1.mouseleave(function(){
            oEvent1.stop(true).animate({height:0,opacity:0},300,function(){
                oMoreIfo.css({display:"none"});
            });
        });
        oEvt2.mouseenter(function(){
            oEvent2.stop(true).css({display:"block"}).animate({height:230,opacity:1},300);
        });
        oEvt2.mouseleave(function(){
            oEvent2.stop(true).animate({height:0,opacity:0},300,function(){
                oMoreIfo.css({display:"none"});
            });
        });

        oEvt3.mouseenter(function(){
            oEvent3.stop(true).css({display:"block"}).animate({height:230,opacity:1},300);
        });
        oEvt3.mouseleave(function(){
            oEvent3.stop(true).animate({height:0,opacity:0},300,function(){
                oMoreIfo.css({display:"none"});
            });
        });
        oBox2A.mouseenter(function(){
            var iIndex = $(this).index();
            mIndex = iIndex+1;
            oBox2A.removeClass("selected").eq(iIndex).addClass("selected");
            oBox1ImgList.animate({left:-(iIndex+1)*1263},500)

        });
        oBanner.mouseenter(function(){
            clearInterval(iTimer);
        });
        oBanner.mouseleave(function(){
            iTimer = setInterval(goRight,3000)
        })
        oLeftIfoLi.mouseenter(function(){
            var iIndex = $(this).index();
            oLeftIfoLi.removeClass("active").eq(iIndex).addClass("active");
            oContent.css({display:"block"});
            oContentDiv.removeClass("hit").eq(iIndex).addClass("hit");
        });
        oLeftIfoLi.mouseleave(function(){
            oLeftIfoLi.removeClass("active");
        });
        oContentDiv.mouseleave(function(){
            oContent.css({display:"none"});
        });

        oLeftIfo.mouseleave(function(){
            oContent.css({display:"none"});
        });

        oRightBtn.click(goRight);


        oLeftBtn.click(goLeft);

        iTimer = setInterval(goRight,3000)

        function goRight(){
            mIndex++;
            oBox1ImgList.stop(true).animate({left:-mIndex*1263},300);
            if(mIndex==8){
                mIndex= 1;
                oBox1ImgList.animate({left:-1263},1);
            }
            oBox2A.removeClass("selected").eq(mIndex-1).addClass("selected");
        }
        function goLeft(){
            mIndex--;
            oBox1ImgList.stop(true).animate({left:-mIndex*1263},300);
            if(mIndex==0){
                mIndex = 7;
                oBox1ImgList.animate({left:-7*1263},1);
            }
            oBox2A.removeClass("selected").eq(mIndex-1).addClass("selected");
        }

        oContMore1Div.mouseenter(function(){
            var iIndex = $(this).index();
            console.log(iIndex);
            oContMore1Img.stop(true).animate({left:0},100).eq(iIndex).animate({left:-20},100);
        });
        oContMore1Div.mouseleave(function(){
            oContMore1Img.animate({left:0},100);
        });

        oBotA.mouseenter(function(){
            oDetail.stop(true).animate({top:280},150);
        });
        oL1.mouseleave(function(){
            oDetail.stop(true).animate({top:294},150);
        });

        $(".demo").bind("mouseenter mouseleave",function(e) {
            var oMove = $(this).children('a');
            var w = $(this).width();
            var h = $(this).height();

            var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
            var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
            var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
            var eventType = e.type;
            if(e.type == 'mouseenter'){
                switch(direction) {
                    case 0:
                        oMove.css({
                            left: 0,
                            top: -242
                        });
                        break;
                    case 1:
                        oMove.css({
                            left: 242,
                            top: 0
                        });
                        break;
                    case 2:
                        oMove.css({
                            left: 0,
                            top: 242
                        });
                        break;
                    case 3:
                        oMove.css({
                            left: -242,
                            top: 0
                        });
                        break;
                }
                oMove.animate({
                    left:0,
                    top:0
                }, 150);
            }else{
                switch(direction) {
                    case 0:
                        oMove.stop(true).animate({
                            left: 0,
                            top: -242
                        },150);
                        break;
                    case 1:
                        oMove.stop(true).animate({
                            left: 242,
                            top: 0
                        }, 150);
                        break;
                    case 2:
                        oMove.stop(true).animate({
                            left: 0,
                            top: 242
                        }, 150);
                        break;
                    case 3:
                        oMove.stop(true).animate({
                            left: -242,
                            top: 0
                        },150);
                        break;
                }
            }
        });


    })(jQuery);

}



